<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- 禁止缩放 -->
		<meta name="viewport" content="user-scalable=0">
		<title>Canvas3D</title>
		<style>
			html,body{
				height:100%;
				width:100%;
			}
			body{
				padding:0;
				margin:0;
				border:0;
			}
			/* 按钮容器样式 */
			.touchBtnContainer{
				position:absolute;
			}
			/* 按钮样式 */
			.btn{
				background:rgba(255,255,255,0.5);
				box-shadow: 0 0 2vh #000000;
				font-size:6vh;
				width:20vh;
				height:20vh;
				border-radius: 10vh;
				text-align: center;
				line-height: 20vh;
			}
		</style>
	</head>

	<body>
		<!-- 画板 -->
		<canvas id="canvas1"></canvas>
		<!-- 左下角按钮容器 -->
		<div class="touchBtnContainer" id="leftTouchBtnContainer" style="bottom:5vh;left:5vh;width:60vh;height:60vh;">
			<div class="btn" id="front" style="position:relative;top:  0vh;left: 20vh;">front</div>
			<div class="btn" id="left"  style="position:relative;top:  0vh;left:  0vh;">left</div>
			<div class="btn" id="right" style="position:relative;top:-20vh;left: 40vh;">right</div>
			<div class="btn" id="back"  style="position:relative;top:-20vh;left: 20vh;">back</div>
		</div>
		<!-- 右下角按钮容器 -->
		<div class="touchBtnContainer" id="rightTouchBtnContainer" style="bottom:5vh;right:5vh;width:20vh;height:40vh;">
			<div class="btn" id="up"    style="position:relative;top:-5vh;right:0vh;">up</div>
			<div class="btn" id="down"  style="position:relative;top:0vh;right:0vh;">down</div>
		</div>
		<script>

			/*
			** Calculation Structures
			** 计算用结构体
			*/

			function Matrix4X4(a00, a01, a02, a03, a10, a11, a12, a13, a20, a21, a22, a23, a30, a31, a32, a33)
			/* 4X4矩阵构造器 */
			{
				this.m00 = a00;
				this.m01 = a01;
				this.m02 = a02;
				this.m03 = a03;

				this.m10 = a10;
				this.m11 = a11;
				this.m12 = a12;
				this.m13 = a13;

				this.m20 = a20;
				this.m21 = a21;
				this.m22 = a22;
				this.m23 = a23;

				this.m30 = a30;
				this.m31 = a31;
				this.m32 = a32;
				this.m33 = a33;
			}

			function Matrix4X1(a00, a01, a02, a03)
			/* 4X1矩阵构造器 */
			{
				this.m00 = a00;
				this.m01 = a01;
				this.m02 = a02;
				this.m03 = a03;
			}

			/*
			** Calculation Functions
			** 计算用函数
			*/

			function Matrix4X4timesMatrix4X4(a, b)
			/* 4X4矩阵乘4X4矩阵 */
			{
				var m00 = (a.m00 * b.m00) + (a.m01*b.m10) + (a.m02*b.m20) + (a.m03*b.m30);
				var m01 = (a.m00 * b.m01) + (a.m01*b.m11) + (a.m02*b.m21) + (a.m03*b.m31);
				var m02 = (a.m00 * b.m02) + (a.m01*b.m12) + (a.m02*b.m22) + (a.m03*b.m32);
				var m03 = (a.m00 * b.m03) + (a.m01*b.m13) + (a.m02*b.m23) + (a.m03*b.m33);
								 
				var m10 = (a.m10 * b.m00) + (a.m11*b.m10) + (a.m12*b.m20) + (a.m13*b.m30);
				var m11 = (a.m10 * b.m01) + (a.m11*b.m11) + (a.m12*b.m21) + (a.m13*b.m31);
				var m12 = (a.m10 * b.m02) + (a.m11*b.m12) + (a.m12*b.m22) + (a.m13*b.m32);
				var m13 = (a.m10 * b.m03) + (a.m11*b.m13) + (a.m12*b.m23) + (a.m13*b.m33);
								 
				var m20 = (a.m20 * b.m00) + (a.m21*b.m10) + (a.m22*b.m20) + (a.m23*b.m30);
				var m21 = (a.m20 * b.m01) + (a.m21*b.m11) + (a.m22*b.m21) + (a.m23*b.m31);
				var m22 = (a.m20 * b.m02) + (a.m21*b.m12) + (a.m22*b.m22) + (a.m23*b.m32);
				var m23 = (a.m20 * b.m03) + (a.m21*b.m13) + (a.m22*b.m23) + (a.m23*b.m33);
								 
				var m30 = (a.m30 * b.m00) + (a.m31*b.m10) + (a.m32*b.m20) + (a.m33*b.m30);
				var m31 = (a.m30 * b.m01) + (a.m31*b.m11) + (a.m32*b.m21) + (a.m33*b.m31);
				var m32 = (a.m30 * b.m02) + (a.m31*b.m12) + (a.m32*b.m22) + (a.m33*b.m32);
				var m33 = (a.m30 * b.m03) + (a.m31*b.m13) + (a.m32*b.m23) + (a.m33*b.m33);

				return new Matrix4X4(m00, m01, m02, m03,
								     m10, m11, m12, m13,
									 m20, m21, m22, m23,
									 m30, m31, m32, m33);
			}

			function Matrix4X1timesMatrix4X4(a, b)
			/* 4X1矩阵乘4X1矩阵 */
			{
				var m00 = (a.m00 * b.m00) + (a.m01*b.m10) + (a.m02*b.m20) + (a.m03*b.m30);
				var m01 = (a.m00 * b.m01) + (a.m01*b.m11) + (a.m02*b.m21) + (a.m03*b.m31);
				var m02 = (a.m00 * b.m02) + (a.m01*b.m12) + (a.m02*b.m22) + (a.m03*b.m32);
				var m03 = (a.m00 * b.m03) + (a.m01*b.m13) + (a.m02*b.m23) + (a.m03*b.m33);

				return new Matrix4X1(m00, m01, m02, m03);
			}

			/* 三角函数(以度数为单位) */
			function cosd(x){
				return Math.cos(x * 0.017453293);
			}

			function sind(x){
				return Math.sin(x * 0.017453293);
			}

			function tand(x){
				return Math.tan(x * 0.017453293);
			}

			function acosd(x){
				return Math.acos(x * 0.017453293);
			}

			function asind(x){
				return Math.asin(x * 0.017453293);
			}

			function atand(x){
				return Math.atan(x * 0.017453293);
			}

			/*
			** 3D Objects Structures
			** 3D对象结构
			*/
			
			function Camera(positionX, positionY, positionZ, angleX, angleY, angleZ, screenWidth, screenHeight)
			/* 欧拉相机 */
			{
				this.x              = positionX;
				this.y              = positionY;
				this.z              = positionZ;
				this.angleX         = angleX;
				this.angleY         = angleY;
				this.angleZ         = angleZ;
				this.screenWidth    = screenWidth;
				this.screenHeight   = screenHeight;
				this.rotationMatrix = null;

				/* 刷新旋转矩阵的Method */
				this.refreshRotationMatrix = function(){
					var ZRotationMatrix = new Matrix4X4(cosd(this.angleZ),      sind(this.angleZ),     0,                      0,
														-1*sind(this.angleZ),   cosd(this.angleZ),     0,                      0,
														0,                      0,                     1,                      0,
														0,                      0,                     0,                      1);

					var YRotationMatrix = new Matrix4X4(cosd(this.angleY),      0,                     -1*sind(this.angleY),   0,
														0,                      1,                     0,                      0,
														sind(this.angleY),      0,                     cosd(this.angleY),      0,
														0,                      0,                     0,                      1);

					var XRotationMatrix = new Matrix4X4(1,                      0,                     0,                      0,
														0,                      cosd(this.angleX),     sind(this.angleX),      0,
														0,                      -1*sind(this.angleX),  cosd(this.angleX),      0,
														0,                      0,                     0,                      1);
					
					this.rotationMatrix = Matrix4X4timesMatrix4X4(Matrix4X4timesMatrix4X4(ZRotationMatrix, YRotationMatrix), XRotationMatrix);
				}
				
			}

			function Vector2D(x,y)
			/* 2D向量 */
			{
				this.x = x;
				this.y = y;
			}

			function Mesh2D(vec1,vec2,vec3)
			/* 2D三角面 */
			{
				this.vec1 = vec1;
				this.vec2 = vec2;
				this.vec3 = vec3;
			}

			function World2D()
			/* 2D世界结构体 */
			{
				this.meshlist = [];
			}

			function Vector4D(x,y,z)
			/* 4D向量(齐次坐标) */
			{
				this.x = x;
				this.y = y;
				this.z = z;
				this.w = 1;
			}

			function Mesh4D(vec1,vec2,vec3)
			/* 4D三角面(齐次坐标) */
			{
				this.vec1 = vec1;
				this.vec2 = vec2;
				this.vec3 = vec3;
			}

			function Object4D(meshlist)
			/* 4D模型结构体(齐次坐标) */
			{
				this.meshlist = meshlist;
			}

			function World4D()
			/* 4D世界结构体(齐次坐标) */
			{
				this.meshlist = [];
				/* 放置4D模型结构体的Method */
				this.PlaceObject4D = function(newObject,x,y,z){
					for(var i = 0; i < newObject.meshlist.length; i++){
						this.meshlist.push(new Mesh4D(new Vector4D(newObject.meshlist[i].vec1.x + x,
																   newObject.meshlist[i].vec1.y + y,
																   newObject.meshlist[i].vec1.z + z,),
													  new Vector4D(newObject.meshlist[i].vec2.x + x,
																   newObject.meshlist[i].vec2.y + y,
																   newObject.meshlist[i].vec2.z + z,),
													  new Vector4D(newObject.meshlist[i].vec3.x + x,
																   newObject.meshlist[i].vec3.y + y,
																   newObject.meshlist[i].vec3.z + z,)));
					}
					this.meshlist.push();
				}
			}
			
			/*
			** Canvas Functions
			** 绘图函数
			*/

			function CanvasInit(canvasID, width, height)
			/* 初始化画布 */
			{
				var canvas    = document.getElementById(canvasID);
				var ctx       = canvas.getContext("2d");
				canvas.width  = width;
				canvas.height = height;
				return ctx;
			}

			function CanvasDrawVector2D(ctx, vector)
			/* 绘制2D顶点 */
			{
				ctx.fillStyle   = "#000000";
				ctx.fillRect(vector.x-3, //Start X Position
							 vector.y-3, //Start Y Position
							 6,          //Width
							 6);         //Height
			}

			function CanvasDrawMesh2D(ctx, mesh, color)
			/* 绘制2D三角面 */
			{
				if(mesh.vec1.x == -1 || mesh.vec2.x == -1 || mesh.vec3.x == -1){
					/* 如果任何一个顶点超出屏幕边界 */
					return; //don't show this vector 不显示这个顶点
				}
				/* 画三个顶点 */
				CanvasDrawVector2D(ctx, mesh.vec1);
				CanvasDrawVector2D(ctx, mesh.vec2);
				CanvasDrawVector2D(ctx, mesh.vec3);

				/* 填充三角面 */
				ctx.fillStyle   = "rgba(0,144,255,0.5)";
				ctx.strokeStyle = "#000000";
				ctx.beginPath();
				ctx.moveTo(mesh.vec1.x, mesh.vec1.y);
				ctx.lineTo(mesh.vec2.x, mesh.vec2.y);
				ctx.lineTo(mesh.vec3.x, mesh.vec3.y);
				ctx.lineTo(mesh.vec1.x, mesh.vec1.y);
				ctx.fill();
				ctx.stroke();
				ctx.closePath();
			}

			function CanvasDrawWorld2D(ctx, world, color)
			/* 绘制2D世界结构体 */
			{
				for(var i = 0; i < world.meshlist.length; i++){
					CanvasDrawMesh2D(ctx, world.meshlist[i], color);
				}
			}

			/*
			** Projection Functions
			** 投影函数
			*/

			function Vector4D2Vector2D(camera,vector)
			/* 4D顶点投影到2D顶点 */
			{
				/* 设定视口坐标参数 */
				var fovY = 60;
				var fot = 1 / tand(fovY / 2);

				/* 根据相机度数旋转顶点,把世界坐标旋转成相机坐标 */
				var final = Matrix4X1timesMatrix4X4(new Matrix4X1(vector.x - camera.x, vector.y - camera.y, vector.z - camera.z, 1), camera.rotationMatrix);
				var vecx  = final.m00;
				var vecy  = final.m01;
				var vecz  = final.m02;

				/* 如果Z轴小于相机,说明顶点在相机身后,直接舍去 */
				if(vecz <= 0){
					return new Vector2D(-1,-1); //don't show this vector 不显示这个顶点
				}
				/* 否则就将顶点从相机坐标投影到屏幕坐标 */
				else{
					/* Z轴变形修正 */
					var x2d     = (vecx) / (vecz);
					var y2d     = (vecy) / (vecz);

					/* 拉伸放大屏幕坐标,形成视口坐标 */
					var xScreen = (camera.screenWidth  / 2) + (x2d * camera.screenHeight / 2 * fot);
					var yScreen = (camera.screenHeight / 2) + (y2d * camera.screenHeight / 2 * fot);
					return new Vector2D(xScreen, yScreen);
				}
			}

			function Mesh4D2Mesh2D(camera,mesh4d)
			/* 4D三角面投影到2D三角面 */
			{
				return new Mesh2D(Vector4D2Vector2D(camera, mesh4d.vec1),
								  Vector4D2Vector2D(camera, mesh4d.vec2),
								  Vector4D2Vector2D(camera, mesh4d.vec3));
			}

			function World4D2World2D(camera,world4d)
			/* 4D世界结构体投影到2D世界结构体 */
			{
				var world2d = new World2D();
				for(var i = 0; i < world4d.meshlist.length; i++){
					world2d.meshlist.push(Mesh4D2Mesh2D(camera, world4d.meshlist[i]));
				}
				return world2d;
			}


			var cam1 = new Camera(0,     //X轴位置
							  0,     //Y轴位置
							  -10,   //Z轴位置
							  0,     //X轴旋转度数
							  0,     //Y轴旋转度数
							  0,     //Z轴旋转度数
							  document.body.clientWidth, //屏幕宽
							  document.body.clientHeight //屏幕高
				             );
			
			window.onload = function()
			/* 初始化函数函数 */
			{
				var ctx  = CanvasInit("canvas1", cam1.screenWidth, cam1.screenHeight);  //初始化画布,并获得Context对象

				/* 创建正方体模型 */
				var obj1 = new Object4D([new Mesh4D(new Vector4D(1,1,1), new Vector4D(4,1,1), new Vector4D(1,4,1)), //front
										 new Mesh4D(new Vector4D(1,4,1), new Vector4D(4,4,1), new Vector4D(4,1,1)), //front
										 new Mesh4D(new Vector4D(1,4,4), new Vector4D(1,1,4), new Vector4D(1,1,1)), //left
										 new Mesh4D(new Vector4D(1,4,4), new Vector4D(1,4,1), new Vector4D(1,1,1)), //left
										 new Mesh4D(new Vector4D(4,4,4), new Vector4D(4,1,4), new Vector4D(4,1,1)), //right
										 new Mesh4D(new Vector4D(4,4,4), new Vector4D(4,4,1), new Vector4D(4,1,1)), //right
										 new Mesh4D(new Vector4D(1,1,4), new Vector4D(4,1,4), new Vector4D(1,4,4)), //back
										 new Mesh4D(new Vector4D(1,4,4), new Vector4D(4,4,4), new Vector4D(4,1,4)), //back
										 new Mesh4D(new Vector4D(1,4,1), new Vector4D(1,4,4), new Vector4D(4,4,4)), //up
										 new Mesh4D(new Vector4D(1,4,1), new Vector4D(4,4,1), new Vector4D(4,4,4)), //up
										 new Mesh4D(new Vector4D(1,1,1), new Vector4D(1,1,4), new Vector4D(4,1,4)), //down
										 new Mesh4D(new Vector4D(1,1,1), new Vector4D(4,1,1), new Vector4D(4,1,4)), //down
										 ]);

				/* 将模型载入到世界结构体中 */
				var world4d1 = new World4D();  //创建世界结构体
				var area = 70;                 //模型区域限制
				world4d1.PlaceObject4D(obj1, -2.5, -2.5, -2.5);  //放置一个固定的正方形在相机正前方
				for(var i = 0; i < 8; i++){
					/* 随机放置正方形到相机前面的4个卦限 */
					world4d1.PlaceObject4D(obj1, Math.random()*area   , Math.random()*area/2   , Math.random()*area);
					world4d1.PlaceObject4D(obj1, Math.random()*area*-1, Math.random()*area/2   , Math.random()*area);
					world4d1.PlaceObject4D(obj1, Math.random()*area   , Math.random()*area/2*-1, Math.random()*area);
					world4d1.PlaceObject4D(obj1, Math.random()*area*-1, Math.random()*area/2*-1, Math.random()*area);
				}

				/* 创建定时运行的主函数 */
				requestAnimationFrame(function main(){                      //请求刷新主函数
					cam1.refreshRotationMatrix();                           //刷新旋转矩阵
					var world2d1 = World4D2World2D(cam1,world4d1);          //将4D世界结构体转换成2D的
					ctx.clearRect(0,0,cam1.screenWidth,cam1.screenHeight);  //清屏
					CanvasDrawWorld2D(ctx,world2d1,"rgba(0,144,255,0.5)");  //画2D世界结构体
					requestAnimationFrame(main);                            //再次请求刷新主函数,形成循环
				});
			}

			/*
			** Input Structures
			** 输入用结构体
			*/

			// function KeyboardEvent()
			// /* 封装过后的键盘对象,带有防卡顿效果 */
			// {
			// 	this.isKeyFirstTimePressing  = false;
			// 	this.isKeySecondTimePressing = false;
			// 	this.keycode                 = -1;
			// 	this.latestKeycode           = -1;
			// 	this.latestKeypressTime      = -1;
			// 	/* Init actions 初始化动作 */
			// 	var _this = this;

			// 	/*当按下按键时的响应 */
				
			// }

			function TouchbtnEvent(front, back, left, right, up, down)
			/* 封装过后的触摸屏按钮对象,可以兼容手机 */
			{
				/* Init actions 初始化动作 */
				var keycode = -1;   //初始化键码
				var _this = this;   //用hacker方法保存this对象

				/* 当触屏按下时,改变键码 */
				front.addEventListener('touchstart',function(){
					_this.keycode = 87;
					event.preventDefault();
				});
				front.addEventListener('touchend',function(){
					_this.keycode = -1;
					event.preventDefault();
				});
				back.addEventListener('touchstart',function(){
					_this.keycode = 83;
					event.preventDefault();
				});
				back.addEventListener('touchend',function(){
					_this.keycode = -1;
					event.preventDefault();
				});
				left.addEventListener('touchstart',function(){
					_this.keycode = 65;
					event.preventDefault();
				});
				left.addEventListener('touchend',function(){
					_this.keycode = -1;
					event.preventDefault();
				});
				right.addEventListener('touchstart',function(){
					_this.keycode = 68;
					event.preventDefault();
				});
				right.addEventListener('touchend',function(){
					_this.keycode = -1;
					event.preventDefault();
				});
				up.addEventListener('touchstart',function(){
					_this.keycode = 90;
					event.preventDefault();
				});
				up.addEventListener('touchend',function(){
					_this.keycode = -1;
					event.preventDefault();
				});
				down.addEventListener('touchstart',function(){
					_this.keycode = 88;
					event.preventDefault();
				});
				down.addEventListener('touchend',function(){
					_this.keycode = -1;
					event.preventDefault();
				});
			}

			function TouchRotationEvent(canvas, camera)
			/* 封装过后的滑动旋转事件,可以用触摸屏滑动来旋转相机 */
			{
				/* Init actions 初始化动作 */
				var lastx,lasty,nowx,nowy;  //定义临时变量
				var _this = this;           //用hacker方法保存this对象
				_this._camera = camera;     //将camera参数传给_this

				/* 当手指按下时 */
				canvas.addEventListener('touchstart',function(){
					event.preventDefault();
					_this.nowx = Math.floor(event.targetTouches[0].pageX);
					_this.nowy = Math.floor(event.targetTouches[0].pageY);
					_this.lastx = Math.floor(event.targetTouches[0].pageX);
					_this.lasty = Math.floor(event.targetTouches[0].pageY);
				});

				/* 当手指移动时 */
				canvas.addEventListener('touchmove',function(){
					event.preventDefault();
					_this.lastx = _this.nowx;
					_this.lasty = _this.nowy;
					_this.nowx = Math.floor(event.targetTouches[0].pageX);
					_this.nowy = Math.floor(event.targetTouches[0].pageY);
					_this._camera.angleY -= (_this.nowx - _this.lastx)*document.body.clientWidth/2000;
					_this._camera.angleX += (_this.nowy - _this.lasty)*document.body.clientWidth/2000;
				});

				/* 当手指放开时 */
				canvas.addEventListener('touchend',function(){
					event.preventDefault(); //不执行浏览器响应指令
				});
			}

			function IsPC()
			/* 判断设备是否是PC */
			{
				var userAgentInfo = navigator.userAgent;
				var Agents = ["Android", "iPhone",
					"SymbianOS", "Windows Phone",
					"iPad", "iPod"];
				var flag = true;
				for (var v = 0; v < Agents.length; v++) {
					if (userAgentInfo.indexOf(Agents[v]) > 0) {
						flag = false;
						break;
					}
				}
				return flag;
			}
			
			/*
			** Input actions
			** 输入用定义
			*/

			/* initialize keyboard control  初始化键盘控制 */
			// var keyboard1 = new KeyboardEvent();

			var lastPressingKeyCode = 0;
			var lastPressingTimeStamp = (new Date()).valueOf();

			window.onkeydown = function(event){
				lastPressingKeyCode = event.keyCode;
				lastPressingTimeStamp = (new Date()).valueOf();
				console.log(lastPressingKeyCode, lastPressingTimeStamp);
			}

			function UpdatePosition(keycode){
				if(keycode == 65){
					//a:left move   左移
					cam1.x -= 1;
				}
				else if(keycode == 68){
					//d:right move  右移
					cam1.x += 1;
				}
				else if(keycode == 87){
					//w:forward     前移
					cam1.z += 1;
				}
				else if(keycode == 83){
					//s:backward    后移
					cam1.z -= 1;
				}
				else if(keycode == 90){
					//z:up move     上移
					cam1.y -= 1;
				}
				else if(keycode == 88){
					//x:down move   下移
					cam1.y += 1;
				}
				else if(keycode == 73){
					//i:up rotation    向上旋转
					cam1.angleX -= 1;
				}
				else if(keycode == 75){
					//k:down rotation  向下旋转
					cam1.angleX += 1;
				}
				else if(keycode == 74){
					//j:left rotation  向左旋转
					cam1.angleY += 1;
				}
				else if(keycode == 76){
					//l:right rotation 向右旋转
					cam1.angleY -= 1;
				}
				else if(keycode == 78){
					//n:z-left rotation;  Z轴左旋
					cam1.angleZ -= 1;
				}
				else if(keycode == 77){
					//m:z-right rotation; Z轴右旋
					cam1.angleZ += 1;
				}
			}
			
			setInterval(function(){
				if(  (new Date()).valueOf() - lastPressingTimeStamp > 500  ){
					lastPressingKeyCode = 0;
					lastPressingTimeStamp = (new Date()).valueOf();
				}
				else{
					if(lastPressingKeyCode == 0){
						return;
					}
					else{
						UpdatePosition(lastPressingKeyCode);
					}
				}
			}, 20);

			/* 判断设备 */
			if (IsPC() != true) {
				console.log("mobile!");
				/* mobile 如果是移动端 */

				/* initialize touchbtn control 初始化触控按钮 */
				var touchRotation1 = new TouchRotationEvent(document.getElementById('canvas1'), cam1);  //为Canvas添加触屏事件,滑动Canvas来旋转相机

				/* 为触控按钮添加点击事件 */
				var touchbtn1 = new TouchbtnEvent(
					document.getElementById("front"),  //前键
					document.getElementById("back"),   //后键
					document.getElementById("left"),   //左键
					document.getElementById("right"),  //右键
					document.getElementById("up"),     //上键
					document.getElementById("down")    //下键
				);
				setInterval(function(){
					if(touchbtn1.keycode == 65){
						//a:left move  左移
						cam1.x -= 1;
					}
					else if(touchbtn1.keycode == 68){
						//d:right move 右移
						cam1.x += 1;
					}
					else if(touchbtn1.keycode == 87){
						//w:forward    前移
						cam1.z += 1;
					}
					else if(touchbtn1.keycode == 83){
						//s:backward   后移
						cam1.z -= 1;
					}
					else if(touchbtn1.keycode == 90){
						//z:up move    上移
						cam1.y -= 1;
					}
					else if(touchbtn1.keycode == 88){
						//x:down move  下移
						cam1.y += 1;
					}
				}, 20);
				
			} else {
				console.log("pc!");
				/* pc 如果是PC端 */
				/* disable touchBtnContainer  禁用触控按钮 */
				var leftTouchBtnContainer = document.getElementById("leftTouchBtnContainer");
				leftTouchBtnContainer.parentNode.removeChild(leftTouchBtnContainer);
				var rightTouchBtnContainer = document.getElementById("rightTouchBtnContainer");
				rightTouchBtnContainer.parentNode.removeChild(rightTouchBtnContainer);
			}
		</script>
	</body>
</html>